<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <link rel="stylesheet" href="./css/index.css">
    <style>
        .el-textarea__inner, .el-input__inner {
            background: transparent !important;
            border: 2px solid hsla(0, 0%, 100%, .7);
        }

        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body style="background-color: #161823;height: 100%;color:#87878e;font-size: 14px">
<div id="app" v-cloak>
    <el-container>
        <!-- 1.左主体 -->
        <my-aside></my-aside>
        <!-- 2.右边栏 -->
        <el-main>
            <!-- 2.1右头边栏 -->
            <my-header></my-header>
            <!-- 2.2右主体 -->
            <el-footer style="margin-top:20px;background-repeat: no-repeat;background-size: 100% ">
                <!--注册界面开始  -->
                <div style="margin: 0 auto;width: 500px;">
                    <el-form style="color: white" label-width="80px">
                        <el-form-item>
                            <h1 style="font-size: 30px">立即注册
                                <span style="float: right;font-size: 15px">
                    <a href="./login.html" style="color: #0aa1ed;text-decoration: none">已有账号?现在登录</a></span>
                            </h1>
                        </el-form-item>
                        <el-form-item label="用户名" >
                            <el-input placeholder="请输入用户名" v-model="user.username"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" >
                            <el-input placeholder="请输入密码" v-model="user.password"></el-input>
                        </el-form-item>
                        <el-form-item label="昵称" >
                            <el-input placeholder="请输入昵称" v-model="user.nickname"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号">
                            <el-input placeholder="请输入手机号" v-model="user.phoneNumber"
                                      :rules="rules.phone"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱" >
                            <el-input placeholder="请输入邮箱" v-model="user.email" :rules="rules.email"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="reg()">注册</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <!-- 注册界面结束-->
            </el-footer>
        </el-main>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.js"></script>
<!--引入Axios框架-->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="js/aside.js"></script>
<script src="js/header.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                user: {
                    username: "",
                    password: "",
                    nickname: "",
                    phoneNumber: "",
                    email: ""
                },
                rules:{
                    phone: [
                        {
                            pattern: /^[1][3-9]\d{9}$/,
                            message: '请输入正确的手机号'
                        }
                    ],
                    email: [
                        {
                            pattern: /^[\w.-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
                            message: '请输入正确的邮箱'
                        }
                    ]
                },
                appArr: [
                    {title: '直播'},
                    {title: '放映室'},
                    {title: '知识'},
                    {title: '热点'},
                    {title: '游戏'},
                    {title: '娱乐'},
                    {title: '二次元'},
                    {title: '音乐'},
                    {title: '美食'},
                    {title: '体育'},
                    {title: '时尚'}
                ]
            }
        },
        methods: {
            register() {

            },
            reg() {
                axios.post("/v1/user/reg",v.user).then(function (response) {
                    if(response.data.code==1000) {
                        location.href = "/login.html";
                    }else{
                        v.$message.error(response.data.msg);
                        console.log(response.data.msg);
                    }
                })
            }
        }
    })
</script>
</html>